
/*
@font-face {
	font-family: 'EuphorigenicRegular';
	src: url('http://straathof.acadnet.ca/fonts/euphorigenic/euphorigenic.eot');
	src: local('☺'),  url('http://straathof.acadnet.ca/fonts/euphorigenic/euphorigenic.woff') format('woff'), url('http://straathof.acadnet.ca/fonts/euphorigenic/euphorigenic.ttf') format('truetype'),  url('http://straathof.acadnet.ca/fonts/euphorigenic/euphorigenic.svg#webfontEzLX1obV') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TechniqueBRKNormal';
	src: url('techniqu.eot');
	src: local('☺'),  url('http://straathof.acadnet.ca/fonts/Technique/techniqu.woff') format('woff'), url('http://straathof.acadnet.ca/fonts/Technique/techniqu.ttf') format('truetype'), url('http://straathof.acadnet.ca/fonts/Technique/techniqu.svg#webfontm8JAvndo') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TechniqueOLBRKNormal';
	src: url('techniqo.eot');
	src: local('☺'), url('http://straathof.acadnet.ca/fonts/Technique/techniqo.woff') format('woff'), url('http://straathof.acadnet.ca/fonts/Technique/techniqo.ttf') format('truetype'), url('http://straathof.acadnet.ca/fonts/Technique/techniqo.svg#webfontSrIxcTuH') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'VeggieburgerBold';
	src: url('VeggiBol.eot');
	src: local('☺'), url('http://straathof.acadnet.ca/fonts/Veggieburger/VeggiBol.woff') format('woff'), url('http://straathof.acadnet.ca/fonts/Veggieburger/VeggiBol.ttf') format('truetype'), url('http://straathof.acadnet.ca/fonts/Veggieburger/VeggiBol.svg#webfontwKXq8RdE') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
	}
ul, li, ol, dl, dd, dt{
	list-style:none;
	padding:0;
	margin:0;
	}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

body { /*    The main method for handling non-moving backgrounds    */
	background: url(images/bg.jpg) top center;
    -moz-background-size: cover;
    -webkit-background-size:  cover ;
    background-size:  cover ;
    -moz-background-position:middle center;
    -webkit-background-position:middle center;
    background-position:middle center;
    background-origin: content-box;
    overflow:hidden;

	background-repeat:no-repeat;
	background-attachment:fixed;
	z-index:1;
	position:relative; top:0px; left:0px;
    margin: 0px 0px 0px 0px;    
    overflow:hidden;
    -webkit-user-select: none;  /* prevent copy paste for all elements */
    -webkit-text-size-adjust: none; /* turn off font resizing */
    }
    
img {
    width:100%;
    }   

p   {padding: 0px 0px 15px 0px ;
    text-align:justify;
    font-size: 20px;
    }

.background { /*    The main method for handling moving backgrounds    */
	overflow:hidden;
    width:100%;
    -webkit-user-select: none;  /* prevent copy paste for all elements */
    }
    
a {text-decoration:none; color:white;}  

h1 {font-size: 40px;
    font-family: "American Typewriter";
    color:white;
    text-shadow: 0.1em 0.1em 0.2em black;
    text-align:center;

	}
    
h2  {font-size:12px;
    color:white;
    text-align:center;
    font-family: "AppleGothic", tahoma, arial;
    }

h3  {font-size:14px;
    color:black;
    text-align:center;
    font-family: "Futura", tahoma, arial;
    }
h4  {font-size:24pt;
    color:white;
    text-align:center;
    /*font-family:"TechniqueBRKNormal";*/
    text-shadow: 0.1em 0.1em 0.2em black;
    } 

.start  {
    font-size:24pt;
    color:white;
    text-align:center;
    font-family: "American Typewriter";
    /*font-family:"TechniqueBRKNormal";*/
    text-shadow: 0.1em 0.1em 0.2em black;
    } 

.test  {
    font-size:5em;
    color:white;
    font-family: "American Typewriter";
    font-weight:bold;
    //font-family:"TechniqueOLBRKNormal";
    text-shadow: 0.1em 0.1em 0.1em black;
    position:relative;
    z-index:7;
    }
.magazine  {
    font-size:3em;
    color:gray;
    //color:red;
    //font-family:"VeggieburgerBold";
    text-shadow: 0.05em 0.05em 0.1em black;
    position:relative;
    top:-0.8em;
    //top:-0.65em;
    z-index:5;
    }
logo-inline{
    //font-family:"TechniqueOLBRKNormal";
    font-family: "American Typewriter";
    font-weight:bold;
    }
    
.inner-shadow {
   box-shadow:inset 0 0 10px #ffffff;
   -moz-box-shadow:inset 0 0 10px #ffffff;
   -webkit-box-shadow:inset 0 0 10px #ffffff;
}



.thumb {/* comment out this line to get shadows
    box-shadow:0px 0px 10px black;
    -webkit-box-shadow:0px 0px 10px black;
    -moz-box-shadow:0px 0px 10px black;*/
    border-style:solid;
    border-width:2px;
    border-color:black;
    margin:5px;
    width:auto;
    height:75px;
    }
.thumb:hover .hover {
   -moz-box-shadow: 0.01em 0.01em 0.25em blue;
   -webkit-box-shadow: 0.01em 0.01em 0.25em blue;
    }

#menu_layout{
    text-align:center;
    height:50px; 
    padding:5px 5px 5px 5px;
    margin:5px 0px 0px 0px;
    background-color:gray;
    }
    
.menu_text {/*how the table of contents look when you double click. */
    font-family: "American Typewriter";
    height:40px; 
    text-align:center;!important
    color:white;
    text-shadow: 0.02em 0.02em 0.15em black;
    font-size:20px;
    padding:5px 5px 5px 5px;
    margin:5px;
    background-color:gray;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;  
    }
.menu_text:hover .hover_effect { /*for menu */
    text-shadow: 0.01em 0.01em 0.25em black;
    text-shadow: 0.01em 0.01em 0.15em black;
    background-color:blue;
    -webkit-transition-duration:.4s; 
    }

a:hover { /*experimental hover effect for touch */
    text-shadow: 0.01em 0.01em 0.25em blue;
    box-shadow: 0.01em 0.01em 0.25em blue;
   -moz-box-shadow: 0.01em 0.01em 0.25em blue;
   -webkit-box-shadow: 0.01em 0.01em 0.25em blue;
    
    color:black;}

/*
.button {
 font-family: Helvetica ;
 font-weight: bold ;
 padding: 15px; 
 border: 1px solid black ;
 -moz-border-radius: 8px ;
 -webkit-border-radius: 8px ; 
 margin-top: 10px ;
 margin-bottom: 10px ;
 background-color: white ;
}    */
#issue-wrapper{ /*    The main 'container' for each page    */
    position:fixed;
    top:50px;
    left:150px;
    text-align:center;
    -webkit-user-select: none;  /* prevent copy paste for all elements */
    -moz-transform: scale(1.75);
    -webkit-transform: scale(1.75);
	}
.space-padding-100{ /*    blank space 100px high    */
    height:100px;
    width:100%;
    }
.space-padding-75{ /*    blank space 75px high    */
    height:75px;
    width:100%;
    }
.space-padding-25{ /*    blank space 25px high    */
    height:25px;
    width:100%;
    }
.issue-title { /*    Hw the title of the magazine will be displayed    */
	vertical-align:middle;
	position:fixed;
	margin:10px 10px 10px 10px;
    top:0px;
	background: url(images/blacktrans2.png);
	height:75px;
    width:75%;    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
   box-shadow:inset 0 0 10px #fff;
   -moz-box-shadow:inset 0 0 10px #fff;
   -webkit-box-shadow:inset 0 0 10px #fff;
    -webkit-user-select: none;  /* prevent copy paste for all elements */
	}   

.description { //the description of the issue
    text-shadow:none;
    }

    
#issue-container { //for the contents list
	position:fixed;
    margin:0px 0px 20px 0px;
    z-index:3;
	}

.article-link { // how the table of contents is displayed
	vertical-align: middle;
	height:auto;
	position:relative;
	margin:5px 5px 10px 5px;
    padding: 10px 10px 10px 10px;
	background: url(images/whitetrans3.png);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
   box-shadow:inset 0 0 10px #000000;
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;   
    display:block;
	}

.article-title { //the title for the article
	font-size:25px;
	color:white;
	text-align:center;
	vertical-align:middle;
	position:relative;
    top:5 px;
	z-index:5;
	margin:10px 0px 0px 0px;
    /*padding: 10px 10px 0px 10px;
	background: url(images/whitetrans3.png);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
   box-shadow:inset 0 0 10px #000000;
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
    display:block; */
    }

.main wrapper{
    width:100%;
    }
.left-side{
  padding: 10px;
  margin:10px;
    border-style:solid;
    border-width:1px;
    border-color:black;
/*    box-shadow:inset 0 0 10px #000000;
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000; */
    position:relative;
	background: url(images/whitetrans4.png);
	left: 35%;
	width:30%;
    }
.right-side{
  padding: 10px;
  margin:10px;
    border-style:solid;
    border-width:1px;
    border-color:black;
/*    box-shadow:inset 0 0 10px #000000;
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000; */
    position:relative;
	background: url(images/whitetrans4.png);
	left:65%;
	width:30%;
    }
.background {
    width:100%;
    height:auto;
    }  

a: hover { text-decoration:none; color:#aaa;}
a: active { text-decoration:none; color:#aaa;}
a: visited { text-decoration:none; color:#aaa;}
a: link { text-decoration:none; color:#aaa;}

/*******************************************************/
/*   Orientation changes for the background and size   */
/*******************************************************/

/* Portrait */
@media screen and (orientation:portrait){

}
/* Landscape */
@media screen and (orientation:landscape){

}

/*********************************/
/*                               */
/* For smaller devices landscape */
/*                               */
/*********************************/

@media screen and (min-width: 321px) and (max-width:480px){

p { font-size:15px;}
body{
    width:480px;
    height:320px;
    -moz-background-size: 480px auto;
    -webkit-background-size:  480px auto ;
    background-size:  480px auto ;
    -moz-background-position:center middle  fixed;
    -webkit-background-position:center middle fixed;
    background-position:center middle center;
    background-origin: content-box;
    overflow:hidden;
	}
    
#issue-wrapper {
    position:fixed;
    top:-50px;
    left:-75px;
    padding:20px 20px 20px 20px;
    -moz-transform: scale(.5);
    -webkit-transform: scale(.5);
	}

.left-side{
    position:relative;
	left:0px;
    border-style:solid;
    border-width:1px;
    border-color:black;
	background: url(images/whitetrans2.png);
	width:50%;
    margin:10px 10px 10px 10px;
    }
.right-side{
    position:relative;
    border-style:solid;
    border-width:1px;
    border-color:black;
	background: url(images/whitetrans2.png);
	left:45%;
	width:50%;
    margin:10px 10px 10px 10px;
    }

#issue-container {
	
	}
.article-title { //the title for the article
	position:relative middle;
    text-align:center;
	}
.issue-title { //the title for the magazine
	width:50%
    }
    
.background {
    width:100%;
    height:auto;
    overflow:hidden;   
    }   

.thumb {
    border-width:1px;
    }
}
/*********************************/
/*                               */
/* For smaller devices  Portrait */
/*                               */
/*********************************/
@media screen and (max-width:320px){


p { font-size:15px;}

body{-moz-background-size: auto 480px;
    -webkit-background-size:  auto 480px;
    background-size:  auto 480px ;
    -moz-background-position:middle center;
    -webkit-background-position:middle center;
    background-position:middle center;
    
    background-origin: content-box;
    overflow:hidden;
    }

#issue-wrapper{
    position:fixed;
    top:-50px;
    left:-75px;
    padding:20px 20px 20px 20px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    }
  
.left-side{
	left:0px;
	width:70%;
    border-style:solid;
    border-width:1px;
    border-color:black;
	background: url(images/whitetrans2.png);
    margin:10px 10px 10px 10px;
    }
.right-side{
	left:25%;
	width:70%;
    border-style:solid;
    border-width:1px;
    border-color:black;
	background: url(images/whitetrans2.png);
    margin:10px 10px 10px 10px;
    }
/*    
.background {
    height:480px;
    width:320px;
    overflow:hidden;
    position:fixed;
    } 
*/
#issue-container {
	height:auto;
	}
.article-title { //the title for the article
	position:relative middle;
    text-align:center;
    }
    
.background {
    width:100%;
    height:auto;
    overflow:hidden;
    }
    
.thumb {
    border-width:1px;
    }
    
}